<script src="../ExternalLibrary/js/vue.js"></script>
<script src="../ExternalLibrary/js/vue-router.js"></script>

<!---------------------------------- 01.路由就是不同的地址调用不同的代码 start---------------------------------->
<fieldset>
    <legend>01.vue-router:路由就是不同的地址,调用不同的代码</legend>
    <div id="routerId">
        此时浏览器地址栏已经有了#。
        但是路由仍然不显示(因为组件就是可视的)
        因为缺少接收路由显示的标签

    </div>
    <script>
        //1,第一步配置路由--专业叫路由表----->路由表其实就是一个大数组
        let routerObj = new VueRouter({
            routes:[//就是这个大数组
                {path:'/user',component:{//path就是条件,符合条件就调用component组件
                    template:"<div>买家</div>"
                }},
                {path:'/company',component:{
                    template:"<div>卖家</div>"
                }}
            ]
        })

        //2,第二步创建vue对象
        let vm = new Vue({
            el:"#routerId",
            router:routerObj//告诉vue对象,注册一个路由,路由是：这个value值(routerObj)。意思就是说这部分数据是要变化的。
        })
    </script>
</fieldset>
<!---------------------------------- 01.路由就是不同的地址调用不同的代码 end---------------------------------->


<!-- 这个时候系统返回键返回的就是碎片页了 -->
<!---------------------------------- 02.router-link接收路由中的组件并显示 start---------------------------------->
<fieldset>
    <legend>02.router-link</legend>
    <div id="routerLink">
        <!-- to中的斜杠可以省略 -->
        <!-- 这里进行切换组件 -->
        <router-link to="/login">登录买家平台</router-link><!-- 原理:就是一个a标签,vue会将当前router-link加上class，就像a标签有个默认的样式一样 -->
        <router-link to="register">注册卖家平台</router-link><!-- 观察地址栏的变化 -->
        <router-view></router-view><!-- 这里接收组件的显示(这个是匿名组件,所以需要找对应的标签接收)) -->
    </div>
    <script>
        //1,配置路由--专业叫法路由表------>路由表其实就是一个数组
        let router = new VueRouter({
            routes:[//就是这个数组
                {path:"/login",component:{//path就是条件,符合条件就调用component组件
                    template:"<div>买家平台</div>"
                }},
                {path:"/register",component:{/* path中的斜杠不能少 */
                    template:"<div>卖家平台</div>"
                }}
            ]
        })

        //2,创建vue对象
        let linkObj = new Vue({
            el:"#routerLink",
            router//key和value相同时,可以简写。告诉vue对象,注册一个路由。意思就是说这部分数据是要变化的
        })
    </script>
</fieldset>
<!---------------------------------- 02.router-link接收路由中的组件并显示 end---------------------------------->

<!-- 这个时候系统返回键返回的就是碎片页了 -->
<!---------------------------------- 03.a标签实现router-link start---------------------------------->
<fieldset>
    <legend>03.a标签实现router-link</legend>
    <div id="aId">
        <!-- 这里的斜杠可以省略 -->
        <a href="#/goodscar">购物车</a><!-- router-link就是对a标签的封装 -->
        <a href="#/moneypay">支付平台</a><!-- 因为的浏览器限制,只能封装a标签 -->
        <router-view></router-view><!-- 只是个占位符,相当于容器。以后要显示的内容都在容器中显示 -->
    </div>
    <script>
        //1,配置路由---专业叫路由表---------------->路由表其实就是一个数组
        let aObj = new VueRouter({
            routes:[//就是这个数组
                {path:"/goodscar",component:{//这里的斜杠不能省略
                    template:"<div>购物车</div>"
                }},
                {path:"/moneypay",component:{
                    template:"<div>支付平台</div>"
                }}
            ]
        })

        //2,创建vue对象
        let vueObj = new Vue({
            el:"#aId",
            router:aObj//告诉vue对象注册一个路由,意思就是说这部分数据是要变化的
        })
    </script>
</fieldset>
<!---------------------------------- 03.a标签实现router-link end---------------------------------->

<!-- 默认匹配“/” -->
<!---------------------------------- 04.默认匹配 strart---------------------------------->
<fieldset>
    <legend>04.默认匹配</legend>
    <div id="router_id">
        <router-view></router-view>
    </div>
    <script>
        let obj_router = new VueRouter({
            routes:[
                {
                    path:"/",
                    component:{
                        template:"<div>支付平台</div>"
                    }
                }
            ]
        })

        let path_vue = new Vue({
            el:"#router_id",
            router:obj_router
        })
    </script>
</fieldset>
<!---------------------------------- 04.默认匹配 end---------------------------------->